<template>
	<view class="gain-award">
		<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="loadMore">
			<view class="gain-msg" v-for="(item,index) in list" :key="index">
				<view class="gain-msg-user">
					<view>
						<image :src="avatarUrl"></image>
						<text>{{nickName}}</text>
					</view>
					<view>
						{{item.current_date}}
					</view>
				</view>
				<view class="answer-result">
					<view>
						十年寒窗苦读，恭喜你获得考取
						<text style="color:#FF5C46;font-size:28upx;">“{{item.grade}}”</text>
					</view>
					<view class="answer-result-grade">
						<view>
							<text>{{item.fraction}}</text>
							<text>得分</text>
						</view>
						<view class="line"></view>
						<view>
							<text>{{item.time}}</text>
							<text>用时</text>
						</view>
						<view class="line"></view>
						<view>
							<text>{{item.surpass}}</text>
							<text>超越人数</text>
						</view>
					</view>
				</view>
				<view class="ranking-award">
					<view class="today-ranking">
						<text>今日排名</text>
						<text style="font-weight: 550;">{{item.rank}}<text style="font-size: 30upx;">名</text></text>
					</view>
					<view class="the-time-award">
						<view>本次奖励</view>
						<view class="the-award-specific">
							<view v-if="item.reward.prize_img&&item.reward.prize">
								<image :src="item.reward.prize_img"></image>
								<text>{{item.reward.prize}}</text>
							</view>
							<view>
								<image style="width:66upx;" :src="achievement_icon"></image>
								<text class="lastText">{{item.reward.achievement_value}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length <= 0" class="no_data" :style="'height:'+height+'px'">
				<image class="no_ana" src="../../../../static/no_data.png"></image>
				<text>挑战金榜题名赛，赢取奖励</text>
			</view>
		</scroll-view>
		<ending></ending>
	</view>
</template>

<script>
	import {MinAndSec,formatMD} from '@/common/util.js'
	import ending from '../../../../common/ending.vue'
	export default{
		components:{ending},
		data() {
			return {
				advanced_lucky: this.$store.state.imgUrl + 'img/advanced_lucky.png',
				avatarUrl: '',
				nickName: '',
				token: this.$store.getters.getToken,
				page: 1,
				last_page: 1,
				list: [],
				height: 0,
				achievement_icon: this.$store.state.imgUrl + 'img/nominate/achievement-icon.png',
			}
		},
		onLoad() {
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			try {
				const res = uni.getStorageSync('userInfo');
				if (res) {
					this.nickName = res.nickName
					this.avatarUrl = res.avatarUrl
				}
			} catch (e) {
				this.nickName = this.$store.state.nickName
				this.avatarUrl = this.$store.state.avatarUrl
			}
			this.getData()
		},
		methods: {
			// 获取我的奖励
			getData() {
				this.page = 1
				let data = {
					token: this.token,
					page: this.page
				}
				this.$api.get_my_reward(data).then(res => {
					if(res.status) {
						for(let i=0;i<res.data.data.length;i++) {
							res.data.data[i].time = MinAndSec(res.data.data[i].time)
							res.data.data[i].current_date = formatMD(res.data.data[i].current_date)
						}
						this.list = res.data.data
						this.last_page = res.data.last_page
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取我的奖励',res)
				}).catch(err => {
					console.log('获取我的奖励',err)
				})
			},
			loadMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.token,
						page: this.page
					}
					this.$api.get_my_reward(data).then(res => {
						if(res.status) {
							for(let i=0;i<res.data.data.length;i++) {
								res.data.data[i].time = MinAndSec(res.data.data[i].time)
								res.data.data[i].current_date = formatMD(res.data.data[i].current_date)
							}
							this.list = this.list.concat(res.data.data) 
							this.last_page = res.data.last_page
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						console.log('获取我的奖励',res)
					}).catch(err => {
						console.log('获取我的奖励',err)
					})
				}
			}
		}
	}
</script>

<style>
	.no_data {
		width: 100%;
		height: 100%;
		padding-top: 0upx;
		font-size: 26upx;
		color: #AAAAAA;
		text-align: center;
		background-color: #fff;
		box-sizing: border-box;
	}
	
	.no_ana {
		margin-top: 152upx;
		width: 100%;
		height: 268upx;
	}
	page{
		position: relative;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.gain-award{
		width: 100%;
		height: 100%;
		background: #F1EFF2;
	}
	.gain-msg{
		width: 100%;
		height: 542upx;
		background: #FFFFFF;
		margin-bottom: 20upx;
		padding: 20upx 30upx;
		box-sizing: border-box;
	}
	.gain-msg-user{
		display: flex;
		justify-content: space-between;
	}
	.gain-msg-user>view:first-child>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.gain-msg-user>view:first-child>text{
		display: inline-block;
		margin-left: 20upx;
		color: #333333;
		font-size: 30upx;
		vertical-align: middle;
	}
	.gain-msg-user>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 24upx;
	}
	.answer-result {
		width: 100%;
		margin-top: 30upx;
	}
	.answer-result > view:first-child {
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		background: rgba(255, 73, 64, 0.1);
		border-radius: 23upx;
		font-size: 24upx;
		color: #666666;
	}
	.answer-result-grade {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding-top: 38upx;
		box-sizing: border-box;
	}
	.answer-result-grade > view > text {
		display: block;
	}
	.answer-result-grade > view > text:first-child {
		color: #333333;
		font-size: 36upx;
		line-height: 50upx;
		font-weight: 550;
	}
	.answer-result-grade > view > text:last-child {
		font-size: 24upx;
		color: #999999;
		line-height: 34upx;
	}
	.answer-result-grade > view:first-child {
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.answer-result-grade > view:last-child {
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.line {
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #efefef;
		margin-top: 20upx;
	}
	.ranking-award{
		width: 100%;
		height: 182upx;
		background: #F7F9FC;
		border-radius: 2upx;
		margin-top: 30upx;
		padding: 20upx 80upx;
		/* padding: 20upx 76upx 20upx 112upx; */
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.ranking-award image{
		width: 90upx;
		height: 68upx;
		border-top-left-radius: 4upx;
		border-top-right-radius: 4upx;
	}
	.today-ranking>text{
		display: block;
	}
	.today-ranking>text:first-child{
		color: #666666;
		font-size: 26upx;
	}
	.today-ranking>text:last-child{
		color: #FF5C46;
		font-size: 44upx;
		margin-top: 22upx;
	}
	.the-time-award>view{
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.the-award-specific{
		display: flex;
		margin-top: 6upx;
	}
	.the-award-specific>view{
		/* background: #D9F2E9; */
		border-radius: 4upx;
	}
	.the-award-specific>view:last-child{
		margin-left: 10upx;
	}
	.the-award-specific text{
		display: block;
		height: 32upx;
		color: #666666;
		font-size: 24upx;
		line-height: 32upx;
	}
	.the-award-specific .lastText{
		width: 92upx;
	}
</style>
